<template>
<div>
  <div class="headerBoo">
    <div @click="collect">
      <van-icon :class="{reds:mycollect}" name="star" :size='20'/>
      <span>{{ collectChange }}</span>
    </div>
    <div @click="isbtnc=!isbtnc">
      <van-icon :class="{reds:isbtnc}" name="comment" :size='20'/>
      <span @click="commints">评论</span>
    </div>
    <div @click="giveLike">
      <van-icon :class="{redLike:islike}" name="good-job" :size='20'/>
      <span>点赞 </span>
      <span class="zan">（{{ zan }}）</span>
    </div>
  </div>
  <NewsComment v-show="isbtnc" />
</div>
</template>

<script>

import NewsComment from "@/components/NewsComment";
import {Toast} from "vant";

export default {
  name: "GiveLike",
  props: {
    zan: Number,
    iscollect: Boolean,
  },
  data() {
    return {
      active: 0,
      collectChange: "收藏",
      isbtnc: false,
      islike: false,
      mycollect: false,
    }
  },
  methods: {
    collect() {
      this.mycollect = !this.mycollect
      if (!this.mycollect) {
        this.collectChange = "收藏"
      } else {
        this.collectChange = "已收藏"
      }
      this.$emit("iscollec", this.mycollect)
    },
    giveLike() {
      this.islike = true
      setTimeout(() => {
        this.islike = false
      }, 110)
      this.$emit("islike", this.islike)

    },
    commints(){

      Toast.fail('您没有评论权限');
    }
  },
  created() {
  },
  watch: {
    iscollect(e) {
      this.mycollect = e
    }
  },
  components:{
      NewsComment
}
}
</script>

<style lang="less" scoped>

.headerBoo {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: relative;

  span {
    position: absolute;
    bottom: 0px;
  }

  .zan {
    width: 10px;
    height: 10px;
    font-size: 8px;
    color: red;
    //background-color: #1989fa;
    position: absolute;
    bottom: 6px;
    right: 32px;
  }

  .reds {
    color: red;
    transform: scale(1.2);
  }

  .redLike {
    animation: redLikes 100ms 1;
    position: relative;
    z-index: 10011111;
  }

  @keyframes redLikes {
    from {
      //color: black;
      transform: scale(1);
      bottom: 0;
    }
    to {
      color: red;
      transform: scale(1.2);
      bottom: 25px;
      right: -10px;
    }
  }

  div {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    //border: 1px solid red;
    span {
      //width: auto;
      text-align: center;
    }
  }
}
</style>